<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>

  <div id='app'>
    <button @click="isShow = !isShow">{{isShow?'消失':'显示'}}</button>
    <keep-alive>
      <Home v-if="isShow" :msg="msg"></Home>
    </keep-alive>
  </div>

<template id="cpn">
  <div>
    {{msg}}
  </div>
</template>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script>
  const Home = {
    template: '#cpn'
    ,data(){
      return {
        // msg: 'Hello Vue'
      }
    }
    ,props: {
      msg: String
    }
    ,beforeCreate() {
      console.log('开始挂载');
    }
    ,created() {
      console.log('属性方法挂载完成，此时可以进行ajax请求');
    }
    ,beforeMount() {
      console.log('开始渲染DOM');
    }
    ,mounted() {
      console.log('DOM渲染完成，此时可以获取DOM进行操作');
    }
    ,beforeUpdate() {
      console.log('开始更新DOM');
    }
    ,updated() {
      console.log('DOM更新完成，可以获取新的DOM操作');
    }
    ,beforeDestroy() {
      console.log('开始销毁组件，此时应对组件垃圾进行清理，如：定时器、挂载到window的属性、方法、事件');
    }
    ,destroyed() {
      console.log('组件销毁完成');
    }
    ,activated() {
      console.log('keep-alive 激活');
    }
    ,deactivated() {
      console.log('keep-alive 停用');
    }
  }
  Vue.component("Home", Home);
  const app = new Vue({
    el: '#app'
    ,data: {
      isShow: true
      ,msg: "hello vue"
    }
  })
</script>
</body>
</html>